<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap使用</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入 bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <style>
      /* [class^="col"] {
        border: 1px solid #ccc;
      }
      .container .row:nth-child(1) {
        background-color: purple;
      } */
      /* 列嵌套 */
      /* .row > div {
        height: 50px;
        background-color: purple;
      } */

      /* 列偏移 ...*/
      .row div {
        height: 80px;
        background-color: purple;
      }
      .row div:nth-child(3){
        background-color: red;
      }
      span{
        font-size: 50px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <!-- Indicates a successful or positive action -->
    <!-- <button type="button" class="btn btn-success">（成功）Success</button>
    <div class="btn btn-success"></div> -->

    <!-- 布局容器 -->

    <!-- 响应式布局容器 -->
    <!-- <div class="container">123</div> -->
    <!-- 流式布局容器 -->
    <!-- <div class="container-fluid">abc</div> -->

    <!-- 栅格系统 -->
    <!-- 
      把 container 容器划分 12 等份
     -->
    <div class="container">
      <!-- 若孩子的份数相加之和等于 12 ，则孩子能占满整个的 container 的宽度 -->
      <!-- <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
      </div>
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
      </div> -->
      <!-- 若孩子的份数相加之和 小于  12 ，则孩子不能占满整个的 container 的宽度 ，会有空白-->
      <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
      </div> -->
      <!-- 若孩子的份数相加之和 大于  12 ，则孩子超出整个的 container 的宽度 ，会另起一行显示-->
      <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
      </div> -->

      <!-- 列嵌套 -->
      <!-- <div class="row">
        <div class="col-md-4">
           列嵌套最好加一个 行(row) 这样就可以取消父元素的 padding值，而且高度和父级一样高 -->
          <!-- <div class="row">
            <div class="col-md-6">a</div>
            <div class="col-md-6">b</div>
          </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
      </div>
    </div> --> 

    <!-- 列偏移 -->
    <!-- 偏移的份数就是 12 - 盒子的总份数 -->
    <!-- <div class="row">
      <div class="col-md-4">右侧</div>
      <div class="col-md-4 col-md-offset-4">左侧</div>
    </div>
    <div class="row">
      <div class="col-md-8 col-md-offset-2">中间盒子</div>
    </div> -->

    <!-- 列排序 -->
    <!-- <div class="row">
      <div class="col-md-4 col-md-push-8">左侧</div>
      <div class="col-md-8 col-md-pull-4">右侧</div>
    </div> -->

    <!-- 响应式工具 -->
    <div class="row">
      <div class="col-xs-3">
        <span class="visible-lg">我会显示</span>
      </div>
      <div class="col-xs-3">2</div>
      <div class="col-xs-3 hidden-md hidden-xs">我会变魔术</div>
      <div class="col-xs-3">4</div>
    </div>
  </body>
</html>
